<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
	  xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:f="http://java.sun.com/jsf/core"
 	  xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

		<ui:composition template="/plantillas/comun.xhtml">
			<ui:define name="pageTitle">
				<h:outputText value="Cumplimiento de Tareas a la Fecha - Vimeworks"/>
			</ui:define>
			<ui:define name="pageContent">
				<h:form>
					<h3>
						<h:outputText value="Reporte de Cumplimiento de Tareas a la Fecha"/>
					</h3>
					<rich:panel style="width: 975px;">
						<h:outputText value="Fecha de corte:" />
						<rich:calendar value="#{estadoTareas.fechaSeleccionada}" datePattern="dd/MM/yyyy HH:mm"  showApplyButton="true" ></rich:calendar>
						<a4j:commandButton action="#{estadoTareas.visualizar}" value="Visualizar" render="grupoReporte"/>
					</rich:panel>
					<br/>
					<h:panelGroup id="grupoReporte">
						<div style="width: 975px; height: 500px;">
							<center>
							<div id="contenedorEstadistica" style="width: 100%">Cargando estadistica...</div>
							</center>
							<script type="text/javascript">
								var myChart = new FusionCharts("${facesContext.externalContext.requestContextPath}/fusioncharts/MSColumn3D.swf", "myChartId", "800", "450", "0", "1");
		      					myChart.setXMLData("#{estadoTareas.xmlData}");
								myChart.render("contenedorEstadistica");
		    				</script>
						</div>
					</h:panelGroup>
				</h:form>
			</ui:define>
		</ui:composition>
	
</html>